$prefix: 'lz-input';

.#{$prefix}{
    position: relative;
    display: inline-block;
    font-size: 12px;
    border: 0px solid transparent;
    overflow: hidden;
    box-sizing: border-box;
    
    &-base{
        padding: 4px 7px;
        border-width: 1px;
        border-color: #d9d9d9;
        border-radius: 4px;
    }
        
    &-hover:hover{
        border-color: #49a9ee;
    }
    
    &-focus:focus {
        border-color: #49a9ee;
        outline: 0;
        box-shadow: 0 0 0 2px rgba(16, 142, 233, 0.2);
    }

    &-group{
        position: relative;
        border: 1px solid #d9d9d9;
        display: table;
        border-radius: 4px;
        input{
            padding: 4px 7px;
            width: 100%;
            border-left-width: 1px;
            border-right-width: 1px;
            border-color: #d9d9d9;
        }
        
        &-addon{
            display: table-cell;
            padding: 0px 5px;
            text-align: center;
            width: 1px;
        }
    }
}
